let layer
let form
layui.use(['layer', 'form'], function () {
    layer = layui.layer;
    form = layui.form


    $(function () {




        // ********************************************************加载列表
        function getList() {
            $.ajax({
                url: "/admin/links",
                type: "GET",
                success: function (res) {
                    //置空tbody
                    $("tbody").html("")

                    // 循环接口data数组
                    $.each(res.data, function (index, item) {

                        let id = item.id
                        let linkname = item.linkname
                        let linkurl = item.linkurl
                        let linkdesc = item.linkdesc
                        let linkicon = item.linkicon
                        let tr = $(`<tr>
                        <td>${id}</td>
                        <td>
                        <div class="bg">
                            <img src="http://127.0.0.1:8888/uploads/${linkicon}">
                        </div>
                        </td>
                        <td>${linkname}</td>
                        <td>${linkurl}</td>
                        <td>${linkdesc}</td>
                        <td>
                        <button type="button" bj=${id}  class="layui-btn layui-btn-xs edit"  name=${linkname} url=${linkurl} desc=${linkdesc} icon=${linkicon}>
                        编辑
                    </button>
                        <button type="button" del=${id} class="layui-btn layui-btn-xs layui-btn-danger delete">
                        删除
                    </button>
                        </td>
                    </tr>`)
                        $("tbody").append(tr)
                    })
                }
            })
        }
        getList()



        // *********************************************************删除友情链接
        $("tbody").on("click", ".delete", function () {

            let id = $(this).attr("del")
            let data = $(this).serialize()
            console.log(id);
            $.ajax({
                url: "/admin/links/" + id,
                type: "DELETE",
                data: data,
                success: function (res) {
                    console.log(res.message);
                    if (res.status == 1) {
                        layer.msg(res.message);

                    } else if (res.status == 0) {
                        layer.msg(res.message);
                        getList()
                    }

                }
            })

        })





        // **********************************************************编辑友情链接

        let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form"  style="margin: 15px 30px 0 0">
  <!-- 第一行：密码 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接名称</label>
    <div class="layui-input-block">
      <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第二行：确认密码 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
      <input type="text" name="linkurl"  required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第三行：链接描述 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接描述</label>
    <div class="layui-input-block">
      <input type="text" name="linkdesc"  required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第四行：上传图片 -->
  <div class="layui-form-item">
    <div class="layui-input-block icon-url">
      <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <input type="file" id="linkFile" style="display: none;">
      <img id="preIcon" src="">
    </div>
  </div>
  <!-- 第三行：按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>`;

        $("tbody").on("click", ".edit", function () {

            let id = $(this).attr("bj")
            // 取值

            let linkname = $(this).attr("name")
            let linkurl = $(this).attr("url")
            let linkdesc = $(this).attr("desc")
            //弹窗
            let index = layer.open({
                type: 1,
                title: '编辑链接',
                content: edit_str,
            });

            //数据回填
            form.val("editForm", {
                linkname: linkname,
                linkurl: linkurl,
                linkdesc: linkdesc
            })

            let src = "http://127.0.0.1:8888/uploads/" + $(this).attr("icon")
            console.log(src);
            $("#preIcon").attr("src", src)


            // ---------------------------------------------------------->
            // 原有选择文件按钮 样式不好看，修改不了！隐藏起来！
            // 点击样式设置好的那个按钮，触发原来按钮
            $("#urlIcon").on("click", function () {
                //JS模拟点击事件
                $("#linkFile").click()
            })

            $("#edit-form").on("submit", function (e) {
                e.preventDefault()

                let fd = new FormData(this)
                fd.append('linkicon', $('#linkFile')[0].files[0])


                $.ajax({
                    url: "/admin/links/" + id,
                    type: "PUT",
                    data: fd,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function (res) {
                        layer.msg(res.message)
                        getList()
                        layer.close(index)
                    }
                })

            })




        })





        // *********************************************************添加友情链接
        let add_str = `
<form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
  <!-- 第一行：密码 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接名称</label>
    <div class="layui-input-block">
      <input type="text" name="linkname"  id="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第二行：确认密码 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接地址</label>
    <div class="layui-input-block">
      <input type="text" name="linkurl"  id="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第三行：链接描述 -->
  <div class="layui-form-item">
    <label class="layui-form-label">链接描述</label>
    <div class="layui-input-block">
      <input type="text" name="linkdesc" id="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
    </div>
  </div>
  <!-- 第四行：上传图片 -->
  <div class="layui-form-item">
    <div class="layui-input-block icon-url">
      <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <input type="file" name="linkicon" id="linkFile" style="display: none;">
      <img id="preIcon" src="">
    </div>
  </div>
  <!-- 第三行：按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>`


        $("#add-link").on("click", function () {


            //弹窗
            let index = layer.open({
                type: 1,
                title: '添加链接',
                content: add_str,
            });

            // // 基于jq；后面cropper方法因为插件JS导致
            // $('#preIcon').cropper({
            //     // 纵横比(宽高比)
            //     aspectRatio: 1 / 1, // 正方形
            //     // 指定预览区域
            //     preview: '.img-preview' // 指定预览区的类名（选择器）
            // });


            //设置图片路径

            // let src = "http://127.0.0.1:8888/uploads/" + $(this).attr("icon")
            // console.log(src);
            // $("#preIcon").attr("src", src)




            // ---------------------------------------------------------->
            // 原有选择文件按钮 样式不好看，修改不了！隐藏起来！
            // 点击样式设置好的那个按钮，触发原来按钮
            $("#urlIcon").on("click", function () {
                //JS模拟点击事件
                $("#linkFile").click()
            })



            $("#add-form").on("submit", function (e) {

                // 阻止默认
                e.preventDefault()
                let fd = new FormData(this)

                $.ajax({
                    url: "/admin/links",
                    type: "POST",
                    data: fd,
                    success: function (res) {

                        layer.msg(res.message)
                        getList()
                        layer.close(index)


                    },

                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                })


            })

        })


    });


})